$mainColor:#23a8f5;

body{background-color:#EFF0F4;}

.modal-body .text-tip {
    margin: 0 auto;
    width: 780px;
    height: 114px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    font-size: 16px;
}

#no-permission-modal .modal-footer{text-align:center; padding-top:0;}
#no-permission-modal .modal-content{border-radius:6px;}

.modal-footer .confirm {
    width: 200px;
    height: 50px;
    line-height: 50px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background-color: #23a8f5;
}

.content-title{
    width:100%;
    background-color:#fff;
    height:60px;
    line-height:60px;
    margin-top:20px;
    
    span{
        color:#222;
        font-size:16px; 
        position:relative;
        top:-4px;
    }
    
    i{
        color:$mainColor;
        font-size:30px;
        margin-right:10px;
    }
}

.btn-row a{
    display:inline-block;
    width:20px;
    height:20px;
    color:#cfd3db;
    cursor:pointer;
    
    &:hover{color:$mainColor;}
    
    &:first-child{
        margin-right:30px;
        position:relative;
        overflow:hidden;
        
        input[type="file"]{
            position:absolute; 
            width:160px; 
            height:20px; 
            background-color:red; 
            left:-140px; 
            cursor:pointer;
            opacity:0;
            filter:alpha(opacity=0);
        }
    }
}

.create-note .create-btn,
.create-note span{cursor:pointer;}

.content{
    margin-top:20px;
    //margin-bottom:60px;
    width:100%;
    color:#222;
    font-size:16px;
    box-sizing:border-box;
    
    .list{
        padding-bottom:15px;
        padding-left:40px;
        padding-right:40px;
        background-color:#fff;
        border-left:1px solid #E2EAED;
        border-right:1px solid #E2EAED;
        border-bottom:1px solid #E2EAED;
        box-sizing:border-box;
        
        &:first-child{border-top:1px solid #E2EAED;}
        
        &:hover{
            background-color:#f8f8fa;
        }
        
        .item{
            height:30px;
            line-height:30px;
            margin-top:15px;
            
            .btn-row{
                display:none;
                margin-right:0;
            }
        }

        
        .file-name{
            width:210px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            
            a{
                display:inline-block;
                height:30px;
                line-height:30px;
                
                &:hover{
                    color:$mainColor;
                }
            }
            
            i{
                color:$mainColor;
                font-size:40px;
                margin-right:15px;
                position:relative;
                top:-2px;
            }
        }
        
        .file-size,
        .date-time{margin-left:80px;}
        
        .time{
            color:#9da7aa;
        }
        
        &:hover>.btn-row{display:block;}
        
        .action{
            margin-left:15px;
            
            span{
                margin-left:15px;
                color:$mainColor;
            }
        }
   
    }
    
    .note-list{margin-top:20px;}
    
    .note-editor,
    .note-item{
        margin-top:20px;
        padding-left:30px;
        padding-right:30px;
        padding-bottom:40px;
        background-color:#fff;
    }
    
    .note-editor{
        min-width:378px;
        display:none;
        
        .save{
            cursor:pointer;
            
            &:hover{color:$mainColor}
        }
    }
    
    .note-bar{
        color:#999;
        padding-top:15px;
        
        &>div{
            height:30px;
            line-height:30px;
            
            &:first-child{width:166px;}
        }
        
        span{color:#222;}
        
        .create-time{margin-right:70px;}
    }
    
    .note-body{
        margin-top:15px;
        width:100%;
        box-sizing:border-box;
        
        textarea{
            width:100%;
            height:200px;
            resize:none;
            background-color:#f5f8f9;
            padding:10px 15px;
            border:1px solid #f3f3f3;
            outline:0;
            color:#222;
            
            &:focus{
                border-color:$mainColor;
                box-shadow:0 0 5px $mainColor;
            }
        }
    }
    
   .note-item{
       border-bottom:1px solid #f1f1f1;
       
       .note-body{
           border-top:1px solid #f1f1f1;
           padding-top:20px;
       }
   }
}

.upload-file span,
.upload-file i{
    cursor:pointer;
}

/*--------------------------------------------
 * 上传进度条(progress bar)
 --------------------------------------------*/
.list .pmgressbar-box{
    margin-top:15px;
    margin-left:80px;
    width:241px;
    height:30px;
    display: none;
    
    &>div{display:inline-block;}
    
    .pmgressbar{
        top:7px;
    }
    
    .pmgressbar-cancel{top:4px;}
}

